<template>
  <div class="newest-divider van-hairline--bottom" :class="{ 'bg-color': isBgColor }">
    <span class="title">{{ `以上为${title}` }}</span>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '最新数据'
    },
    isBgColor: {
      type: Boolean,
      default: false,
    }
  }
}
</script>

<style lang="less" scoped>
.newest-divider {
  height: 34px;
  background: #fff;
  margin-top: -2px;
  padding: 7px 0;
  overflow: hidden;
  z-index: 2;
  // padding: 0 16px;
  .title{
    // content: attr(data-title);
    font-size: 12px;
    position: absolute;
    left: 50%;
    z-index: 5;
    transform: translateX(-50%);
    color: #9CA5B5;
    line-height: 22px;
    padding: 0 5px;
    background: #fff;
  }
  &.van-hairline--bottom::after {
    top: 50%;
    bottom: auto;
    border-color: #9CA5B5;
    border-style: dashed;
    left: calc(-50% - -32px);
    right: calc(-50% - -32px);
  }
  &.bg-color {
    height: 20px;
    background: #f7f9fa;
    padding: 0;
    margin-top: 12px;
    .title{
      background: #f7f9fa;
    }
  }
}

</style>